<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<video id="v1" width="300" height="200"controls>
		<source src="mov.mp4" type="video/mp4">
	</video>
	<P>
	<canvas id="canvas" width="300" height="200"></canvas>
</body>
<script type="text/javascript">
	var cxt = document.getElementById("canvas").getContext("2d");
	var video = document.getElementById("v1");
	var  timer;
	function play() {
			timer = window.setInterval(function(){
			cxt.drawImage(video, 0, 0);	}, 20);
	}

	function pause() {
		window.clearInterval(timer);
	}

	function ended() {
		window.clearInterval(timer);
	}
	video.addEventListener("play", play, false);
	video.addEventListener("pause", pause, false);
	video.addEventListener("ended", ended, false);

</script>
</html>